<template>
	<div v-if="show" class="right-menu-mask" @click.stop="close()" @contextmenu.prevent="close()">
		<div class="right-menu" :style="{ 'left': adjustedX + 'px', 'top': adjustedY + 'px' }">
			<div class="menu-container">
				<div v-for="(item) in items" :key="item.key" class="menu-item" :style="{ color: item.color }"
					@click.stop="onSelectMenu(item)">
					<i v-if="item.icon" :class="item.icon" class="menu-icon"></i>
					<span class="menu-text">{{ item.name }}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "rightMenu",
	data() {
		return {
			show: false,
			pos: {
				x: 0,
				y: 0,
			},
			items: [],
			menuWidth: 0,
			menuHeight: 0
		}
	},
	computed: {
		// 自动调整菜单位置，防止超出屏幕边界
		adjustedX() {
			const windowWidth = window.innerWidth;
			return this.pos.x + this.menuWidth > windowWidth ? this.pos.x - this.menuWidth : this.pos.x;
		},
		adjustedY() {
			const windowHeight = window.innerHeight;
			return this.pos.y + this.menuHeight > windowHeight ? this.pos.y - this.menuHeight : this.pos.y;
		}
	},
	methods: {
		open(event, items) {
			// 支持传入事件对象或位置对象
			if (event.clientX !== undefined) {
				this.pos = { x: event.clientX, y: event.clientY };
			} else {
				this.pos = event;
			}
			this.items = items;

			// 立即显示菜单，避免闪动
			this.show = true;

			// 添加防闪动类到触发元素
			const targetElement = event.target ? event.target.closest('.chat-item, .friend-item, .group-item') : null;
			if (targetElement) {
				targetElement.classList.add('context-menu-active');
			}

			// 下一帧计算菜单尺寸
			this.$nextTick(() => {
				const menuEl = this.$el.querySelector('.right-menu');
				if (menuEl) {
					this.menuWidth = menuEl.offsetWidth;
					this.menuHeight = menuEl.offsetHeight;
				}
			});
		},
		close() {
			this.show = false;

			// 移除防闪动类
			const activeElements = document.querySelectorAll('.context-menu-active');
			activeElements.forEach(el => {
				el.classList.remove('context-menu-active');
			});
		},
		onSelectMenu(item) {
			this.$emit("select", item);
			this.close();
		}
	}
}
</script>

<style lang="scss" scoped>
.right-menu-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: transparent;
}

.right-menu {
	position: fixed;
	background: var(--card-bg, #ffffff);
	border: 1px solid var(--border-color, #e4e7ed);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
	min-width: 140px;
	opacity: 1;
	transform: scale(1);
	transform-origin: top left;
	z-index: 10000;
	will-change: transform, opacity;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	.menu-container {
		padding: 6px 0;

		.menu-item {
			display: flex;
			align-items: center;
			padding: 10px 16px;
			cursor: pointer;
			font-size: 14px;
			color: var(--text-primary, #303133);
			transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
			white-space: nowrap;
			user-select: none;
			position: relative;
			margin: 2px 6px;
			border-radius: 8px;

			&:hover {
				background-color: var(--hover-bg, #f5f7fa);
				color: var(--color-primary, #409eff);
				transform: translateX(2px);
			}

			&:active {
				transform: translateX(1px) scale(0.98);
			}

			.menu-icon {
				width: 18px;
				height: 18px;
				margin-right: 10px;
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: transform 0.2s ease;
			}

			.menu-text {
				flex: 1;
				line-height: 1.4;
				font-weight: 500;
			}

			// 危险操作样式（如删除）
			&:hover {

				&[style*="color: #F56C6C"],
				&[style*="color: #f56c6c"] {
					background-color: rgba(245, 108, 108, 0.1);
					color: #f56c6c !important;

					.menu-icon {
						transform: scale(1.1);
					}
				}
			}

			// 为图标添加悬停效果
			&:hover .menu-icon {
				transform: scale(1.05);
			}
		}
	}
}

// 右键菜单显示动画（已禁用，防止闪动）
// @keyframes showRightMenu {
// 	from {
// 		opacity: 0;
// 		transform: scale(0.95);
// 	}

// 	to {
// 		opacity: 1;
// 		transform: scale(1);
// 	}
// }

// 深色模式适配
@media (prefers-color-scheme: dark) {
	.right-menu {
		background: var(--card-bg, rgba(45, 45, 45, 0.95));
		border-color: var(--border-color, #4c4d4f);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);

		.menu-item {
			color: var(--text-primary, #e5eaf3);

			&:hover {
				background-color: var(--hover-bg, rgba(58, 58, 58, 0.8));
				color: var(--color-primary, #409eff);
			}

			// 深色模式下的危险操作
			&:hover {

				&[style*="color: #F56C6C"],
				&[style*="color: #f56c6c"] {
					background-color: rgba(245, 108, 108, 0.2);
					color: #ff7875 !important;
				}
			}
		}
	}
}

// 主题切换时的适配
:root[data-theme='dark'] {
	.right-menu {
		background: var(--card-bg, rgba(45, 45, 45, 0.95));
		border-color: var(--border-color, #4c4d4f);

		.menu-item {
			color: var(--text-primary, #e5eaf3);

			&:hover {
				background-color: var(--hover-bg, rgba(58, 58, 58, 0.8));
			}
		}
	}
}
</style>
